<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('结算单列表')"/>
    <th:block th:include="include :: footer"/>
    <th:block th:include="include :: layout-latest"/>
</head>
<body>
<div class="ui-layout-center">
    <div class="col-sm-12 search-collapse">
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4  control-label">客户姓名：</label>
                <label class="col-sm-8 control-label">[[${statement.customerName}]]</label>
            </div>
        </div>
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4 control-label">联系方式：</label>
                <label class="col-sm-8 control-label">[[${statement.customerPhone}]]</label>
            </div>
        </div>
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4 control-label">车牌号码：</label>
                <label class="col-sm-8 control-label">[[${statement.licensePlate}]]</label>
            </div>
        </div>
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4 control-label">汽车类型：</label>
                <label class="col-sm-8 control-label">[[${statement.carSeries}]]</label>
            </div>
        </div>
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4 control-label">服务类型：</label>
                <label class="col-sm-8 control-label"
                       th:text="${@dict.getLabel('si_service_catalog',statement.serviceType)}"></label>
            </div>
        </div>
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4 control-label">到店时间：</label>
                <label class="col-sm-8 control-label"
                       th:text="${#dates.format(statement.actualArrivalTime,'yyyy-MM-dd HH:mm:ss')}"></label>
            </div>
        </div>
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4 control-label">总消费金额：</label>
                <label id="totalMoney" class="col-sm-8 control-label">[[${statement.totalAmount}]]</label>
            </div>
        </div>
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4 control-label">实付价格：</label>
                <label id="payMoney" class="col-sm-8 control-label">[[${statement.totalAmount-statement.discountAmount}]]</label>
            </div>
        </div>
        <div class="col-sm-6 m-t-xs">
            <div class="form-group">
                <label class="col-sm-4 control-label">优惠价格：</label>
                <label th:text="${statement.discountAmount}" class="col-sm-4 control-label">优惠价格：</label>
            </div>
        </div>
    </div>
    <div class="col-sm-12 select-table table-striped">
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" id="printlt" onclick="printlt()">
                <i class="fa fa-print"></i> 打印
            </a>
            <a class="btn btn-warning" id="exportExcel" onclick="exportExcel()">
                <i class="fa fa-edit"></i> 导出
            </a>
        </div>
        <table id="cartTable"></table>
    </div>
</div>
<div class="ui-layout-east">
    <div class="col-sm-12 search-collapse">
        <form id="customer-form">
            <div class="select-list">
                <!--服务类高级查询-->
                <ul>
                    <li>
                        <input type="hidden" name="params[saleStatus]" value="1">
                        名&emsp;&emsp;称: <input type="text" placeholder="请输入服务名称" name="params[name]"/>
                    </li>
                    <li>
                        是否套餐:
                        <select name="params[carPackage]" th:with="type=${@dict.getType('bus_car_ackage')}">
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </li>
                    <li>
                        服务分类:
                        <select name="params[serviceCatalog]" th:with="type=${@dict.getType('bus_car_catalog')}">
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </li>

                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('customer-form','serveTable')">
                            <i class="fa fa-search"></i>&nbsp;搜索</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div class="col-sm-12 select-table table-striped">
        <table id="serveTable"></table>
    </div>
</div>
</body>


<script>
    let statementId = [[${statement.id}]];

    $('body').layout({
        east__size: '30%',
    });

    function exportExcel() {
        $.modal.confirm("确认导出当前消费结算单吗?", function () {
            window.open(ctx + "business/statement/exportExcel?statementId=" + statementId)
        });
    }

    $(function () {
        let prefix = ctx + "business/statementItem";
        var options = {
            id: 'serveTable',
            url: prefix + "/queryForServiceItem",   //查询的数据地址
            pagination:false,//分页功能
            showRefresh:true,//刷新按钮
            uniqueId: "id",
            columns: [
                {
                    field: 'id',
                    title: '业务id',
                    visible: false
                },
                {
                    field: 'name',
                    title: '服务项目名称',
                    sortable: true
                },
                {
                    field: 'originalPrice',
                    title: '服务项价格',
                    sortable: true,
                },
                {
                    field: 'info',
                    title: '备注',
                    sortable: true

                }]
        };
        $.table.init(options);
    });
    $(function () {
        let prefix = ctx + "business/statementItem";
        var options = {
            id:'cartTable',
            showSearch:false,//搜索按钮
            pagination:true,//分页功能
            showRefresh:true,//刷新按钮
            url: prefix + "/query/"+ statementId,   //查询的数据地址
            uniqueId:"itemId",
            columns: [
                {
                    field: 'itemId',
                    title: '结算单id',
                    visible: false
                },
                {
                    field: 'itemName',
                    title: '服务项目名称',
                    sortable: true
                },
                {
                    field: 'itemPrice',
                    title: '服务项价格',
                    sortable: true,
                },
                {
                    field: 'itemQuantity',
                    title: '数量',
                    sortable: true,

                }]
        };
        $.table.init(options);
    });
</script>

</html>